<template>
  <van-popup :close-on-click-overlay="false" :show="show" @close="close" position="right" custom-style="width:660rpx;height:100%;" @touchstart="touchstart" z-index="1000">
    <view class="contanier" :style="{ height: setHeight + 'px' }">
      <view>
        <van-search :value="value" shape="round" background="#FFFFFF" placeholder="搜索品牌" @search="shopSearch" left-icon="https://staticcdn.youliao.com/static/image/www_m/temp/224e3e40-2595-11eb-880a-0db19f4f74bb.png" use-action-slot></van-search>

        <view class="header-title">全部品牌</view>
      </view>
      <view class="center" :style="{ height: setContentHeight + 'px' }">
        <!-- <view class="center-top"></view> -->
        <!-- <view class="center-content" id="centerContent"> -->
        <scroll-view class="center-content" :style="{ height: setCenterHeight + 'px' }" id="centerContent" :scroll-into-view="toView" scroll-with-animation scroll-y @scroll="handleScroll">
          <view class="center-content-item" v-for="(item, index) in brandList" :key="index">
            <view class="center-content-item-title" :id="item.firstLetter">{{ item.firstLetter }}</view>
            <view v-for="(sitem, sindex) in item.list" :key="sindex">
              <view class="center-content-item-line" @click="checkIndex(index, sindex)">
                <van-checkbox icon-size="40rpx" :value="sitem.isCheck"></van-checkbox>
                <text class="center-content-item-line-name">{{ sitem.name }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
        <!-- </view> -->
        <view class="center-index-list right-list" :style="{ height: setCenterHeight + 'px' }">
          <!-- <view class="center-index-list-top"></view> -->
          <view class="center-index-list-center">
            <view :class="['center-index-list-center-item', activeIndex === item || toView === item ? 'center-index-list-center-item-active' : '']" v-for="(item, index) in indexList" :key="index" @click="gotoIndex(item)">{{ item }}</view>
          </view>
          <!-- <view class="center-index-list-bottom"></view> -->
        </view>
        <view class="center-bottom"></view>
      </view>

      <view class="footer">
        <view class="footer-box">
          <view class="footer-box-btn footer-box-reset-btn" @click="reset">重置</view>
          <view class="footer-box-btn footer-box-confirm-btn" @click="submit">确定</view>
        </view>
      </view>
    </view>
  </van-popup>
</template>

<script>
import api from "@/api/goods.js";

export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    ids: {
      type: [String, Number],
    },
    height: {
      type: Number,
      default: 0,
    },
    cHeight: {
      type: Number,
      default: 0,
    },
    from: {
      type: String,
      default: "",
    },
    fromBrandList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "#"],
      brandList: [],
      toView: "",
      partsHeight: [],
      selectBrand: [],
      containerHeight: "",
      activeIndex: "",
      letterTxt: "全部",
      setHeight: 0,
      setContentHeight: 0,
      setCenterHeight: 0,
    };
  },
  components: {},
  created() {
    // this.branchList = this.indexList.map(item => {
    //   return {
    //     keyword: item,
    //     list: [
    //       { name: "阿科玛", isCheck: false },
    //       { name: "阿科玛", isCheck: false },
    //       { name: "阿科玛", isCheck: false }
    //     ]
    //   };
    // });
  },
  mounted() {
    if (this.from === "goods") {
      this.brandList = this.fromBrandList;
      this.setBrandList(this.brandList);
    } else {
      this.getBrandListAll();
    }
    this.fGetHeight();
    this.setIds();
  },
  computed: {
    branchArrs() {
      if (this.letterTxt === "全部品牌" || !this.brandOpen) {
        return this.brandList;
      }
      if (this.letterTxt === "#") {
        return this.brandList.filter(item => !this.indexList.includes(item.firstLetter)).sort((n1, n2) => n2.sort - n1.sort);
      }
      return this.brandList.filter(item => item.firstLetter === this.letterTxt).sort((n1, n2) => n2.sort - n1.sort);
    },
  },
  // watch: {
  //   ids(newVal, oldVal) {
  //     console.log('111==1===,', newVal, oldVal);
  //     if (this.brandList.length > 0) {
  //       this.brandList.forEach(item => {
  //         item.list.forEach(x => {
  //           let numList = newVal.split(',');
  //           console.log('numList', numList);
  //           if (numList.includes(`${x.id}`)) {
  //             x.isCheck = true;
  //             this.selectBrand.push(x);
  //           }
  //         });
  //       });
  //     }
  //   },
  // },
  methods: {
    setIds() {
      if (this.brandList.length > 0) {
        this.brandList.forEach(item => {
          item.list.forEach(x => {
            const numList = this.ids.split(",");
            if (numList.includes(`${x.id}`)) {
              x.isCheck = true;
              this.selectBrand.push(x);
            }
          });
        });
      }
    },
    shopSearch(val) {
      // if (this.from === "goods") {
      //   if (val.detail) {
      //     // 前端模糊搜索
      //     this.brandList = this.fromBrandList.filter(item => {
      //       const reg = new RegExp(val.detail); // 搜索关键词
      //       return reg.test(item.name); // 要检索的字符串
      //     });
      //   } else {
      //     this.brandList = this.fromBrandList;
      //   }
      //   this.setBrandList(this.brandList);
      // } else {
      //   this.getBrandListAll(val.detail);
      // }
      this.getBrandListAll(val.detail);
    },
    async getBrandListAll(name = "") {
      const res = await api.getBrandListAll({ name });
      this.brandList = res.data;
      this.setBrandList(this.brandList);
    },
    setBrandList() {
      this.brandList.forEach(item => {
        this.$set(item, "isCheck", false);
      });
      let blist = [];
      this.brandList.forEach(item => {
        if (item.firstLetter && blist.findIndex(x => x.firstLetter === item.firstLetter) === -1) {
          blist.push({ firstLetter: item.firstLetter, list: [] });
        }
      });
      if (blist.length > 0) {
        blist.forEach(x => {
          this.brandList.forEach(item => {
            if (x.firstLetter === item.firstLetter) {
              x.list.push(item);
            }
          });
        });
      }
      blist = blist.sort((n1, n2) => n1.firstLetter.localeCompare(n2.firstLetter));
      this.brandList = blist;
    },
    checkIndex(index, sindex) {
      const isCheck = this.brandList[index].list[sindex].isCheck;
      this.brandList[index].list[sindex].isCheck = !isCheck;
      if (this.brandList[index].list[sindex].isCheck && this.selectBrand.findIndex(x => x.id === this.brandList[index].list[sindex].id) === -1) {
        this.selectBrand.push(this.brandList[index].list[sindex]);
      } else {
        this.selectBrand = this.selectBrand.filter(x => !(x.id === this.brandList[index].list[sindex].id));
      }
      // this.$set(this.branchList[index],subIndex,)
    },
    reset() {
      this.brandList.forEach(item => {
        item.list.forEach(x => {
          x.isCheck = false;
        });
      });
      this.selectBrand = [];
    },
    submit() {
      this.$emit("submit", this.selectBrand);
    },
    close() {
      this.$emit("close");
    },
    touchstart() {},
    gotoIndex(item) {
      this.toView = item;
    },
    handleScroll(e) {
      this.toView = "";

      const scrollTop = e.detail.scrollTop + 1;
      if (scrollTop >= this.partsHeight[this.partsHeight.length - 1] - this.containerHeight) {
        this.activeIndex = this.indexList[this.partsHeight.length - 1];
      } else {
        this.partsHeight.forEach((fi, index) => {
          if (fi <= scrollTop && scrollTop < this.partsHeight[index + 1]) {
            this.activeIndex = this.indexList[index + 1];
          }
          if (scrollTop >= 0 && scrollTop < this.partsHeight[0]) {
            this.activeIndex = this.indexList[0];
          }
        });
      }
    },
    fGetHeight() {
      const arrHeight = [];
      let num = 0;
      uni
        .createSelectorQuery()
        .in(this)
        .selectAll(".center-content-item")
        .boundingClientRect(arr => {
          arr.forEach(item => {
            num += item.height;
            arrHeight.push(num);
          });
        })
        .exec();
      this.partsHeight = arrHeight;

      uni
        .createSelectorQuery()
        .in(this)
        .select("#centerContent")
        .boundingClientRect(res => {
          this.containerHeight = res.height;
        })
        .exec();
      this.setHeight = uni.getSystemInfoSync().windowHeight - this.height;
      this.setContentHeight = uni.getSystemInfoSync().windowHeight - this.height - 92;
      this.setCenterHeight = uni.getSystemInfoSync().windowHeight - this.height - this.cHeight;
    },
  },
};
</script>

<style lang="scss" scope>
.contanier {
  position: relative;
  .header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 188rpx;
    box-sizing: border-box;
    background: #fff;
    &-title {
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
      padding: 30rpx;
      padding-top: 0;
    }
  }

  .center-top {
    height: 188rpx;
  }

  .center {
    position: relative;

    &-content {
      height: calc(100vh - 308rpx);
      overflow: scroll;
      padding-bottom: constant(safe-area-inset-bottom); /* 兼容IOS<11.2 */
      padding-bottom: env(safe-area-inset-bottom); /* 兼容IOS>11.2 */
      box-sizing: border-box;
      &-item {
        &-title {
          background: #f5f5f5;
          font-size: 28rpx;
          color: #262626;
          height: 48rpx;
          padding: 0 30rpx;
          display: flex;
          align-items: center;
        }
        &-line {
          height: 88rpx;
          display: flex;
          align-items: center;
          border-bottom: 1rpx solid #f3f3f3;
          display: flex;
          padding: 0 30rpx;

          &-name {
            margin-left: 16rpx;
          }
        }
      }
    }
    &-index-list {
      height: 100vh;
      position: absolute;
      right: 38rpx;
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &-top {
        width: 100%;
        height: 188rpx;
      }

      &-center {
        overflow: scroll;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        &-item {
          font-size: 24rpx;
          color: #333333;
          margin-bottom: 5rpx;
          // width: 40rpx;
          // height: 40rpx;
          // border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        &-item:last-of-type {
          margin-bottom: 0;
        }
        &-item-active {
          color: #f0780e;
          // color: #fff;
        }
      }

      &-bottom {
        width: 100%;
        min-height: 120rpx;
        padding-bottom: constant(safe-area-inset-bottom); /* 兼容IOS<11.2 */
        padding-bottom: env(safe-area-inset-bottom); /* 兼容IOS>11.2 */
      }
    }
  }

  .center-bottom {
    height: 120rpx;
  }

  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: constant(safe-area-inset-bottom); /* 兼容IOS<11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容IOS>11.2 */
    background: #fff;
    &-box {
      width: 100%;
      padding: 20rpx 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 280rpx;
        height: 80rpx;
        font-size: 28rpx;
        border-radius: 40rpx;
      }

      &-reset-btn {
        background: #f2f2f2;
        color: #f0780e;
      }

      &-confirm-btn {
        background: #f0780e;
        color: #fff;
      }
    }
  }
  .right-list {
    overflow-y: auto;
  }
}
</style>
